<import template="/panel/_header" />
<div class="page-container">
    <div class="main-content">
        <div class="page-title">
            <div class="title-env">
                <h1 class="title">服务购买</h1>
                <p class="description">充值，购买卡号（月卡，季度卡，年卡，流量套餐）</p>
            </div>
            <div class="breadcrumb-env">
                <ol class="breadcrumb bc-1"><li><a href="/member"><i class="fa-home"></i>主页</a></li><li><a href="javascript:;">服务购买</a></li><li class="active"><strong>类型选择</strong></li></ol>
            </div>
        </div>

        <div class="panel-body">
            <div class="row">
                <div class="col-sm-2">
                    <div class="form-group">
                        <div class="xe-widget xe-progress-counter">

                            <div class="xe-background">
                                <i class="fa-paper-plane"></i>
                            </div>

                            <div class="xe-upper">
                                <div class="xe-icon">
                                    <i class="fa fa-paper-plane"></i>
                                </div>
                                <div class="xe-label">
                                    <span>套餐</span>
                                    <strong class="num">B</strong>
                                </div>
                            </div>

                            <div class="xe-progress">
                                <span class="xe-progress-fill" data-fill-from="0" data-fill-to="45" data-fill-unit="%" data-fill-property="width" data-fill-duration="2" data-fill-easing="true"></span>
                            </div>

                            <div class="xe-lower plan-info">
                                <span>12 元/月</span><br/>
                                <strong>可用 50GB流量</strong><br/>
                                <strong>可使用所有普通节点</strong><br/>
                            </div>
                            <div class="xe-lower">
                                <button class="btn btn-white btn-buy plan-b">立即购买</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <div class="xe-widget xe-progress-counter xe-progress-counter-turquoise">

                            <div class="xe-background">
                                <i class="fa-paper-plane"></i>
                            </div>

                            <div class="xe-upper">
                                <div class="xe-icon">
                                    <i class="fa fa-paper-plane"></i>
                                </div>
                                <div class="xe-label">
                                    <span>套餐</span>
                                    <strong class="num">C</strong>
                                </div>
                            </div>

                            <div class="xe-progress">
                                <span class="xe-progress-fill" data-fill-from="0" data-fill-to="72" data-fill-unit="%" data-fill-property="width" data-fill-duration="2" data-fill-easing="true"></span>
                            </div>

                            <div class="xe-lower plan-info">
                                <span>20 元/月</span><br/>
                                <strong>可用 100GB流量</strong><br/>
                                <strong>可使用所有普通节点</strong><br/>
                            </div>
                            <div class="xe-lower">
                                <button class="btn btn-white btn-buy plan-c">立即购买</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <div class="xe-widget xe-progress-counter xe-counter-block-orange">

                            <div class="xe-background">
                                <i class="fa-paper-plane"></i>
                            </div>

                            <div class="xe-upper">
                                <div class="xe-icon">
                                    <i class="fa fa-paper-plane"></i>
                                </div>
                                <div class="xe-label">
                                    <span>套餐</span>
                                    <strong class="num">D</strong>
                                </div>
                            </div>

                            <div class="xe-progress">
                                <span class="xe-progress-fill" data-fill-from="0" data-fill-to="85" data-fill-unit="%" data-fill-property="width" data-fill-duration="2" data-fill-easing="true"></span>
                            </div>

                            <div class="xe-lower plan-info">
                                <span>30 元/月</span><br/>
                                <strong>可用 200GB流量</strong><br/>
                                <strong>可使用所有普通+Pro节点</strong><br/>
                            </div>
                            <div class="xe-lower">
                                <button class="btn btn-white btn-buy plan-d">立即购买</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <div class="xe-widget xe-progress-counter xe-counter-block-purple">

                            <div class="xe-background">
                                <i class="fa-paper-plane"></i>
                            </div>

                            <div class="xe-upper">
                                <div class="xe-icon">
                                    <i class="fa fa-paper-plane"></i>
                                </div>
                                <div class="xe-label">
                                    <span>套餐</span>
                                    <strong class="num">VIP</strong>
                                </div>
                            </div>

                            <div class="xe-progress">
                                <span class="xe-progress-fill" data-fill-from="0" data-fill-to="100" data-fill-unit="%" data-fill-property="width" data-fill-duration="2" data-fill-easing="true"></span>
                            </div>

                            <div class="xe-lower plan-info">
                                <span>50 元/月</span><br/>
                                <strong>无限制流量使用</strong><br/>
                                <strong>可用普通+Pro+国内中转节点</strong><br/>
                            </div>
                            <div class="xe-lower">
                                <button class="btn btn-white btn-buy plan-vip">立即购买</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <div class="xe-widget xe-progress-counter xe-progress-counter-pink">

                            <div class="xe-background">
                                <i class="fa-paper-plane"></i>
                            </div>

                            <div class="xe-upper">
                                <div class="xe-icon">
                                    <i class="fa fa-paper-plane"></i>
                                </div>
                                <div class="xe-label">
                                    <span>套餐</span>
                                    <strong class="num">流量包</strong>
                                </div>
                            </div>

                            <div class="xe-progress">
                                <span class="xe-progress-fill" data-fill-from="0" data-fill-to="85" data-fill-unit="%" data-fill-property="width" data-fill-duration="2" data-fill-easing="true"></span>
                            </div>

                            <div class="xe-lower plan-info">
                                <span>100GB/50元</span><br/>
                                <strong>可用 100GB流量 不限时</strong><br/>
                                <strong>可使用所有普通+Pro节点</strong><br/>
                            </div>

                            <div class="xe-lower">
                                <button class="btn btn-white btn-buy plan-z">立即购买</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <div class="xe-widget xe-progress-counter xe-progress-counter-pink">

                            <div class="xe-background">
                                <i class="fa-paper-plane"></i>
                            </div>

                            <div class="xe-upper">
                                <div class="xe-icon">
                                    <i class="fa fa-paper-plane"></i>
                                </div>
                                <div class="xe-label">
                                    <span>套餐</span>
                                    <strong class="num">私人定制</strong>
                                </div>
                            </div>

                            <div class="xe-progress">
                                <span class="xe-progress-fill" data-fill-from="0" data-fill-to="100" data-fill-unit="%" data-fill-property="width" data-fill-duration="2" data-fill-easing="true"></span>
                            </div>

                            <div class="xe-lower plan-info">
                                <span>&#8734;/&#8734;GB</span><br/>
                                <strong>可用 &#8734;流量</strong><br/>
                                <strong>可使用任何节点+定制节点</strong><br/>
                            </div>

                            <div class="xe-lower">
                                <button class="btn btn-white disabled btn-buy plan-s" disabled="disabled">立即购买</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        <script type="text/javascript">
            $(function () {
                $(".btn-buy").on('click', function () {
                    var className = $(this)[0].className;
                    var planInfo = $(this).parent().parent().find(".plan-info").html();
                    className = className.substr(className.indexOf('plan'));

                    switch (className) {
                        case 'plan-b':
                            dialog(null, "真的要购买 B 套餐吗? <br/><br/>" + planInfo, "b");
                            break;
                        case 'plan-c':
                            dialog(null, "真的要购买 C 套餐吗? <br/><br/>" + planInfo, "c");
                            break;
                        case 'plan-d':
                            dialog(null, "真的要购买 D 套餐吗? <br/><br/>" + planInfo, "d");
                            break;
                        case 'plan-vip':
                            dialog(null, "真的要购买 VIP 套餐吗? <br/><br/>" + planInfo, "vip");
                            break;
                        case 'plan-z':
                            dialog(null, "真的要购买 固定流量 套餐吗? <br/><br/>" + planInfo, "z");
                            break;
                        default:
                            dialog(null, "excuse me?");
                            break;
                    }
                })
            });
            
            function dialog(title, content, plan) {
                $("#modal-1 .modal-title").html(title==null?"创建订单":title);
                $("#modal-1 .modal-body").html(content);
                $("#modal-1 .btn.btn-info").on('click', function () {
                    $("#modal-1 .btn.btn-info").off('click');
                    window.location = "/order/create?plan=" + plan;
                });
                $("#modal-1").modal("show", {backdrop:"fade"});
            }
        </script>
        </div>
        <import template="/panel/_copyright" />
    </div>
</div>
<import template="/panel/_footer" />